<!DOCTYPE html>
<html>
	<head>
		<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />
		<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport' />
		<meta content='CSS3 Icons, Pure CSS3 Icons Gallery' name='keywords' />
		<meta content='List of Icons that are Made Purely with CSS3.' name='description' />
		<meta content='Taufik Nurrohman' name='author' />
		<title>CSS3 Icons Gallery</title>
		<link rel="stylesheet" media="screen" href="files/style.css" type="text/css" />
		<link rel="stylesheet" media="screen" href="files/general.css" type="text/css" />
		<style type="text/css">
		.addthis_toolbox {
		  position:absolute;
		  top:30px;
		  right:30px;
		}
		#at15ptc {
		  color:black !important;
		}
		</style>
	</head>
	<body>

		<header id="logo">
		<h1>CSS3 Icons Gallery</h1><strong>List of Icons that are Made Purely with CSS3.</strong><br />Click an icon to see the code.
		</header>

		<div id="top"></div> <!-- fallback -->


		<div class="container" id="arrows-container"><h2>Arrows Icons</h2></div>
		<div class="container" id="activity-container"><h2>Symbolize &amp; Activity Icons</h2></div>
		<div class="container" id="social-container"><h2>Social Icons</h2></div>
		<div class="container" id="other-container"><h2>Others Icons</h2></div>




		
		<div id="result">
			<h2>General CSS</h2>You have to add this CSS code before implementing the CSS code below:
			<div class="flow"><pre id="general"></pre></div>
			<div class="left" id="css"><h2>CSS Code</h2><div class="flow"><pre>Click something to see the code.</pre></div></div>
			<div class="right" id="html"><h2>The HTML</h2><div class="flow"><pre>Click something to see the code.</pre></div></div>
			<div class="clear"></div>
		</div>
		<br />
		<a id="top" href="#top">Back to List</a>
		<br /><br />
		<h2>List of Icons that are Made Purely with CSS3</h2>
		This is a directory where I store my works about objects that I made purely with CSS.<br />
		Although here I give the name 'List of Icons', but actually it's more about object dimensions documentation. You can just change the size to be larger or smaller by changing the scale. In this case also means increase/decrease the size of each element (This is a scalable icons!). Change the color, position or whatever. <br /><a class="how" href="http://www.dte.web.id/2012/04/css3-icons-gallery.html">But how?<span>Read more details here.</span></a>





	<footer id="footer">
		<a href="https://plus.google.com/108949996304093815163/posts" class="dte">
			<div class="dte-box1">
				<div class="dte-mid"></div>
				<div class="tn1"></div>
				<div class="tn2"></div>
				<div class="tn2 botlogo"></div>
				<div class="horlogo"></div>
				<div id="glass"></div>
			</div>
			<span>Who??</span>
		</a>
		<div><a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/"><!-- img alt="Creative Commons License" src="http://i.creativecommons.org/l/by-nc-sa/3.0/80x15.png" style="border:none;display:inline-block;vertical-align:middle;" / --></a> This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/3.0/">Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License</a>. <span title="19 days after it was my birthday. Good luck...">&copy; 02 April 2012</span> - <a href="http://hompimpaalaihumgambreng.blogspot.com/">Taufik Nurrohman</a></div>
	</footer>

	<!-- AddThis Button BEGIN -->
	<div class="addthis_toolbox addthis_default_style"><a class="addthis_counter addthis_pill_style"></a></div>
	<!-- script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4dfacea85b106d59"></script>
	<!-- AddThis Button END -->
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
	</body>
</html>